<template>
	<view class="detail-pages pages">
		<loading v-if="showLoading"></loading>
		<CustomNav title="抽奖" :active="{textColor:'#fff',background:'#32005B'}" :is-back="true"></CustomNav>
		<image class="top-banner"
			src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/raffle_bg.png" mode="widthFix">
		</image>
		<view class="info-block">

			<image class="raffle"
				src="https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/raffle.png"
				mode="widthFix"></image>

			<view class="menu-block">
				<view class="menu-item" @click="navigate('/page_other/shopping/award?id='+info.id)">我的奖品</view>
			</view>
			<view class="img-item">
				<view style="margin-top: 30rpx;">
					<almost-lottery :lottery-size="lotteryConfig.lotterySize" :action-size="lotteryConfig.actionSize"
						:ring-count="6" :duration="4" :self-rotaty="false" :img-circled="true" :canvasCached="true"
						:prize-list="prizeList" :prize-index="prizeIndex" :drawStartBefore="handleDrawStartBefore"
						@reset-index="prizeIndex = -1" @draw-start="handleDrawStart" @draw-end="handleDrawEnd"
						:img-drawed="true" @draw-before="handleDrawBefore" @finish="handleDrawFinish"
						v-if="prizeList.length" :colors="['#FFF1CC','#FFCC00']" :strFontColors="['#FF4100','#FF4100']"
						:img-height="100" :img-width="100" :strMarginOutside="30" :imgMarginStr="20" />
				</view>
				<view class=" name FZHZGBJ" v-if="info.freeFrequency-info.userTodayCount>0">您还有<text
						class="count FZHZGBJ">{{info.freeFrequency-info.userTodayCount}}</text>次免费机会
				</view>
				<view class="name" v-else style="display: flex;align-items: center;">
					<view class="name" v-if="info.consumptionPoints!==0&&info.consumptionVoucher!==0">
						每次抽奖消耗{{info.consumptionPoints}}积分和{{info.consumptionVoucher}}券,</view>
					<view class="name" v-else-if="info.consumptionPoints!==0&&info.consumptionVoucher===0">
						每次抽奖消耗{{info.consumptionPoints}}积分,</view>
					<view class="name" v-else-if="info.consumptionPoints===0&&info.consumptionVoucher!==0">
						每次抽奖消耗{{info.consumptionVoucher}}券,</view>
					<view class="name">您今日还有<text class="count FZHZGBJ">{{info.dayLimit-info.userTodayCount}}</text>次机会
					</view>
				</view>
				<view class="list-block">
					<view class="item">
						<view class="title FZHZGBJ">—获奖名单—</view>
						<template v-if="list.length>0">
							<WFscroll :listArr="list" :scrollHeight="260" :scrollTimer="true">
							</WFscroll>
						</template>
						<view v-else style="text-align: center;">暂无数据</view>
					</view>
				</view>
				<view class="rule-block">
					<view class="title">-活动规则-</view>
					<view class="text">
						<mp-html :content="info.description" />
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getRaffleApi,
		getListApi
	} from '@/api/shopping.js'
	import AlmostLottery from '@/uni_modules/almost-lottery/components/almost-lottery/almost-lottery.vue'
	import WFscroll from '@/components/WF-scroll/WF-scroll.vue'
	import {
		clearCacheFile,
		clearStore
	} from '@/uni_modules/almost-lottery/utils/almost-utils.js'
	import {
		getStorage
	} from '@/util/auth.js'
	import {
		getUserInfo
	} from '@/api/home.js';
	export default {
		components: {
			AlmostLottery,
			WFscroll
		},
		data() {
			return {
				info: {
					id: null,
					dayLimit: '',
					integral: '',
					userTodayCount: '',
					description: '',
					freeFrequency: 0,
					consumptionPoints: 0,
					consumptionVoucher: 0
				},
				integral: 0,
				voucher: 0,
				lotteryConfig: {
					// 抽奖转盘的整体尺寸，单位rpx
					lotterySize: 580,
					// 抽奖按钮的尺寸，单位rpx
					actionSize: 200
				},

				// 以下是奖品配置数据
				// 奖品数据
				prizeList: [],
				// 奖品是否设有库存
				onStock: true,
				// 中奖下标
				prizeIndex: -1,

				// 是否正在抽奖中，避免重复触发
				prizeing: false,
				//taskTimer: null,
				scrollTop: 0,
				list: [],
				cCount: 0,
				// vesselHeight: '',
				// height: ''
			}
		},
		methods: {
			getPrizeList() {
				return getListApi().then(res => {
					if (res === '暂无活动') {
						this.showToast('活动暂未开始', () => {
							uni.navigateBack()
						})
					} else {
						this.info = res
						if (res.prizeList) {
							let data = res.prizeList || []
							data.forEach(item => {
								
								item.prizeImage = this.cloudStorage + item.prizeImage
								
							})
							this.prizeList = data
						}
						this.list = res.lotteryRecords
					}
				})
			},
			getUser() {
				return getUserInfo().then((res) => {
					this.integral = res.integral
					this.voucher = res.voucher
				})
			},
			// 抽奖开始之前
			handleDrawBefore(callback) {
				// 还有免费数次或者剩余金币足够抽一次
				if (getStorage('token')) {
					if (this.isVip == 1) {
						// if (this.info.userTodayCount < this.info.dayLimit || this.integral >= this.info.integral) {
						// 	this.handleDrawStart()
						// } else {
						// 	if (this.info.userTodayCount = this.info.dayLimit) {
						// 		this.showToast('抽奖次数已用完')
						// 	} else if (this.integral < this.info.integral) {
						// 		this.showToast('您的积分不足')
						// 	}
						// }
						if (this.info.userTodayCount < this.info.dayLimit) {
							if (this.info.userTodayCount >= this.info.freeFrequency) {
								var that = this;
								uni.showModal({
									title: '提示',
									content: '今日免费次数已用完，继续抽奖将会消耗您的积分或券',
									cancelText: '取消',
									confirmText: '抽奖',
									success(res) {
										if (res.confirm) {
											that.handleDrawStart()
										}
									}
								})
							} else {
								this.handleDrawStart()
							}
						} else {
							this.showToast('今日抽奖次数已用完')
						}
					} else {
						uni.showModal({
							title: '提示',
							content: '需要先开通会员！',
							cancelText: '先逛逛',
							confirmText: '去开通',
							success(res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/page_other/become_member/index'
									})
								}
							}
						})
					}
				} else {
					uni.showModal({
						title: '提示',
						content: '需要先登录！',
						cancelText: '先逛逛',
						confirmText: '去登录',
						success(res) {
							if (res.confirm) {
								uni.reLaunch({
									url: '/page_other/mine/mine'
								})
							} else {
								uni.navigateBack();
							}
						}
					})
				}
			},
			// 本次抽奖开始
			handleDrawStart() {
				if (this.info.userTodayCount == this.info.dayLimit || this.integral < this.info.integral) {
					if (this.info.userTodayCount == this.info.dayLimit) {
						this.showToast('今日次数不足！')
					} else if (this.integral < this.info.integral) {
						this.showToast('您的积分不足！')
					}
				}
				if (this.prizeing) return
				this.prizeing = true
				this.tryLotteryDraw()
			},
			// 尝试发起抽奖
			tryLotteryDraw() {
				if (this.info.userTodayCount < this.info.dayLimit || this.integral >= this.info.integral) {
					getRaffleApi({
						activityId: this.info.id
					}).then(res => {
						if (res == '今日次数不足') {
							this.showToast(res)
							return;
						}
						if (res == '积分不足，无法参与抽奖！') {
							this.showToast(res)
							return;
						}
						this.prizeIndex=this.prizeList.findIndex(item=>item.pid==res.pid);
						setTimeout(() => {
							this.getData()
						}, 4000)
					})
				} else {
					this.showToast('今日次数不足')
				}
			},
			// 本次抽奖结束
			handleDrawEnd() {
				// 旋转结束后，开始处理拿到结果后的逻辑
				let prizeName = this.prizeList[this.prizeIndex].prizeName
				let tipContent = ''
				if (prizeName === '谢谢参与') {
					tipContent = '很遗憾，没有中奖，请再接再厉！'
				} else {
					tipContent = `恭喜您，获得${prizeName} ！`
				}
				console.log(tipContent);
				uni.showModal({
					content: tipContent,
					showCancel: false,
					complete: () => {
						this.prizeing = false
					}
				})
			},
			// 抽奖转盘绘制完成
			handleDrawFinish(res) {
				if (res.ok) {
					// 计算结束绘制的时间
					if (console.timeEnd) {
						console.timeEnd('绘制转盘用时')
					}
				}
				let stoTimer = setTimeout(() => {
					stoTimer = null
					uni.hideLoading()
					uni.showToast({
						title: res.msg,
						mask: true,
						icon: 'none'
					})
				}, 50)
			},
			getData() {
				uni.showCustomLoading();
				Promise.all([this.getUser(), this.getPrizeList()]).finally(() => {
					uni.hideCustomLoading()
				})
			}
		},
		onLoad() {
			this.getData()
			const userInfo = getStorage('user');
			this.isVip = userInfo.vip;
		},
		onUnload() {
			uni.hideLoading()
		},
	}
</script>
<style lang="scss" scoped>
	.detail-pages {
		overflow: hidden;

		.top-banner {
			width: 100%;
			position: absolute;
		}

		.info-block {
			padding: 30rpx;
			position: relative;
			margin-top: 130rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;

			.menu-block {
				position: absolute;
				right: 0;
				top: 5%;

				.menu-item {
					font-size: 32rpx;
					margin-top: 16rpx;
					color: #fff;
					width: 140rpx;
					height: 70rpx;
					border-radius: 14rpx 0 0 14rpx;
					background-color: rgba(14, 6, 3, .2);
					display: flex;
					font-weight: bold;
					align-items: center;
					justify-content: center;
				}
			}

			.img-item {
				width: 100%;
				padding: 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.raffle {
					width: 100%;
				}

				.raffle-img {
					width: 100%;
					margin-top: -30rpx;
				}

				.name {
					font-size: 28rpx;
					color: #FEF2CA;
					margin-top: 30rpx;

					.count {
						font-size: 38rpx;
					}
				}
			}

			.list-block {
				width: 100%;
				height: 520rpx;
				background-image: url('https://job-1306862033.cos.ap-chengdu.myqcloud.com/miniprogram-static/alliance/name_bg.png');
				background-size: 100%;
				border-radius: 0 0 20rpx 20rpx;

				.item {
					margin-top: 140rpx;
					padding: 30rpx;

					.title {
						color: #0256FF;
						text-align: center;
						margin-bottom: 10rpx;
					}

					.info-item {
						display: flex;
						position: relative;
						padding: 6rpx;

						.time {
							width: calc(100% / 3);
							display: flex;
							justify-content: center;
							font-size: 28rpx;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
					}

					.info-item.active {
						background: linear-gradient(to right, #FF2F34, #FF6B18);
					}
				}
			}

			.title {
				color: #fff;
				margin: 20rpx auto;
			}

			.rule {
				width: 100%;
				font-size: 24rpx;
				color: #fff;
				display: flex;
				justify-content: flex-start;
			}

			.rule-block {
				.title {
					margin: 40rpx auto;
					font-size: 36rpx;
					font-weight: normal;
					text-align: center;
				}

				.text {
					font-size: 32rpx;
					line-height: 30px;
					font-weight: normal;
					color: #Fff;
				}
			}
		}

	}
</style>